Angular Content Projection

In angular, if we want to insert or pass any template to the component we can use content projection.

This allows us to insert a shadow DOM to the component. Suppose if we need to pass certain html content to the component then it can be done using content projection.

Content projection can be done using <ng-content></ng-content> tag. Let's see it with an example.

Create a new angular project

Create an angular application using the following angular cli command.

ng new content-projection

Create a HomeComponent

Let's create a HomeComponent to display the welcome screen.

ng g c home

Open up the home.component.html file and add the following code.

<div>
	<ng-content></ng-content>
</div>

The <ng-content></ng-content> will render the content projected by the parent component.

Refer HomeComponent with content projection in AppComponent

Open the app.component.html file and add the following code.

<app-home>
	<div class='header'>Welcome ReadersBuddy</div>
</app-home>

We have provided some content inside the selector of the HomeComponent. The content below will be rendered in HomeComponent using <ng-content></ng-content>.

<div class='header'>Welcome ReadersBuddy</div>

Run the project

Run the application using

ng serve --o  

Here, content will be rendered in the home.component.html file.

Adding multiple content projection with select attribute

To make things interesting, we shall move further. Open the app.component.html file and modify the code as below.

<app-home>
	<div header class='header'>Welcome ReadersBuddy</div>
	<div content class='container'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel  eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
	<div footer class='footer'>All rights reserved to ReadersBuddy</div>
</app-home>

Here, inside the app-home selector we have added few more contents with some attribute name home, content and footer.

We are naming the templates so that we can use these names to display the templates at different location.

Now open the home.component.html file and modify the content as below.

<div>
	<ng-content select='[header]'></ng-content>
</div>
<div>
	<ng-content select='[content]'></ng-content>
</div>
<div>
	<ng-content select='[footer]'></ng-content>
</div>

Here, in the ng-content we have mentioned the select attribute and mention the name of the template inside [] brackets, So that it will render that content to the ng-content.

Note:

If we dont specify any 'select' attribute then it will render the
entire content to a single ng-content even though we mention
multiple ng-content.

Click on this link to check out the content in stackblitz. For styling I have updated the app.component.css file with the following style.

:host {
  box-sizing: border-box;
}
.header {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3399ff;
  color: white;
}

.container {
  height: calc(80vh - 20px);
  margin: 10px;
}

.footer {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00264d;
  color: white;
}